<template>
    <div class="home">
        <Filter></Filter>
        <el-divider>
            <el-icon style="color: #409EFF;">
                <star-filled />
            </el-icon>
            <span style="color: #409EFF; font-size: large;">最佳匹配</span>
            <el-icon style="color: #409EFF;">
                <star-filled />
            </el-icon>
        </el-divider>
        <el-row :gutter="20">
            <el-col :span="12" v-for="(i, index) in bestData" :key="index">
                <ResultCard :img="i.img" :title="i.title" :source="i.source" :course="i.course" :site="i.site"
                    :people="i.people">
                </ResultCard>
            </el-col>
        </el-row>
        <el-divider>
            <span style="color: #409EFF; font-size: large;">先修知识点推荐</span>
        </el-divider>
        <el-row :gutter="20">
            <el-col :span="12" v-for="(i, index) in recommendData" :key="index">
                <ResultCard :img="i.img" :title="i.title" :source="i.source" :course="i.course" :site="i.site" :url="i.url"
                    :people="i.people">
                </ResultCard>
            </el-col>
        </el-row>
    </div>

</template>

<script lang="ts" setup>
import Filter from '@/components/Result/Filter.vue';
import ResultCard from '@/components/Result/ResultCard.vue';
import { ref } from 'vue';

const bestData = ref([
    {
        img: 'http://img-ph-mirror.nosdn.127.net/S_KZHbKd1cVnNakzi7s3nw==/39125021863241218.png?imageView&type=webp',    // 图片地址
        title: '一般常数项级数及其审敛法',  // 标题
        source: '西安交通大学', // 来源的大学
        course: '高等数学（二）', // 课程名
        site: 'Mooc',   // 来源网站
        people: 8306, // 已学人数
        url: 'https://www.icourse163.org/learn/XJTU-1001756006#/learn/content?type=detail&id=1247311999&sm=1'     // 视频地址
    }
]);
const recommendData = ref([
    {
        img: 'https://img1.baidu.com/it/u=1813873914,3489154976&fm=253&fmt=auto&app=138&f=JPEG?w=461&h=650',    // 图片地址
        title: '正项级数的审敛准则',  // 标题
        source: '西安交通大学', // 来源的大学
        course: '高等数学（二）', // 课程名
        site: 'Mooc',   // 来源网站
        people: 10650, // 已学人数
        url: 'https://www.icourse163.org/course/XJTU-1001756006?from=searchPage'     // 视频地址
    },
    {
        img: 'https://img2.baidu.com/it/u=691034867,3928482613&fm=253&fmt=auto&app=120&f=JPEG?w=1281&h=800',    // 图片地址
        title: '正项级数的审敛准则',  // 标题
        source: '猴博士', // 来源的大学
        course: '高等数学（二）', // 课程名
        site: 'Mooc',   // 来源网站
        people: 5134, // 已学人数
        url: 'String'     // 视频地址
    },
    {
        img: 'https://img1.baidu.com/it/u=1813873914,3489154976&fm=253&fmt=auto&app=138&f=JPEG?w=461&h=650',    // 图片地址
        title: '幂级数及其敛散性的判别法',  // 标题
        source: '西安交通大学', // 来源的大学
        course: '高等数学（二）', // 课程名
        site: 'Mooc',   // 来源网站
        people: 8306, // 已学人数
        url: 'String'     // 视频地址
    },
]);

</script>
<style scoped>
</style>